<template>
    <div class="studentifo">
        <h3 v-text="msg"></h3>
        <p>学生姓名：{{studentName}}</p>
        <p>年龄：{{myAge}}</p>
        <!-- 修改年龄 -->
        <button @click="changeAge">年龄自增1</button>
    </div>
</template>

<script>
export default {
    name:"StudentNa",
    data(){
        return {
            msg:"学生个人信息",
            //props中配置的属性优先级高于data中的。
            myAge:this.age
        }
    },
    //1.简便写法
    // props:['studentName','age'] 

    //2.要求数据类型
    // props:{
    //     studentName:String,
    //     age:Number
    // }

    //3.选择必填项/默认值
    props:{
        studentName:{
            type:String,   //name类型为字符串类型
            required:true  //name是必要的
        },
        age:{
            type:Number,
            default:18
        }
    },
    methods:{
        changeAge(){
            this.myAge++
        }
    }
}
</script>

<style>
    .studentifo{
        background-color: lightgreen;
    }
</style>